<template>
	<el-dialog append-to-body :width="width" :visible="value" :before-close="handleClose" :show-close="false" style="margin-top: 25vh !important" custom-class="modal-dialog modal-remove-dialog">
		<div class="text-[18px] font-bold text-center mb-[37px] text-[#333333]">{{ title }}</div>
		<span v-if="showButton" slot="footer">
			<slot name="footer">
				<div class="modal-footer">
					<el-button
						v-if="showOkButton"
						type="primary"
						class="modal-footer-btn !w-[108px] !h-[36px] flex items-center justify-center text-[14px] cursor-pointer"
						:class="['modal-footer-btn', '!mr-0']"
						:style="okButtonStyle"
						:loading="buttonLoading"
						@click="ok"
						>{{ okButtonText }}</el-button
					>
					<el-button
						v-if="showCloseButton"
						:style="closeButtonStyle"
						class="modal-footer-btn !w-[108px] !h-[36px] flex items-center justify-center text-[14px] !ml-[15px] !mr-0"
						@click="handleSubmitClose"
						>{{ closeButtonText }}</el-button
					>
				</div>
			</slot>
		</span>
	</el-dialog>
</template>

<script>
export default {
	props: {
		//标题
		title: {
			type: String,
			default: '',
		},
		//宽度
		width: {
			type: String,
			default: '316px',
		},
		//保存按钮文字
		okButtonText: {
			type: String,
			default: '确定',
		},
		//保存宽度
		onButtonWidth: {
			type: String,
			default: 'auto',
		},
		//取消宽度
		closeButtonWidth: {
			type: String,
			default: 'auto',
		},
		//取消按钮文字
		closeButtonText: {
			type: String,
			default: '取消',
		},
		//是否显示按钮
		showButton: {
			type: Boolean,
			default: true,
		},
		//是否显示确定按钮
		showOkButton: {
			type: Boolean,
			default: true,
		},
		//是否显示取消按钮
		showCloseButton: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			value: false,
			buttonLoading: false,
		};
	},
	computed: {
		okButtonStyle() {
			if (!this.onButtonWidth || this.onButtonWidth == 'auto') return {};
			return {
				width: this.onButtonWidth,
				flex: '0 0 ' + this.onButtonWidth,
			};
		},
		closeButtonStyle() {
			if (!this.onButtonWidth || this.onButtonWidth == 'auto') return {};
			return {
				width: this.onButtonWidth,
				flex: '0 0 ' + this.onButtonWidth,
			};
		},
	},
	methods: {
		show() {
			this.value = true;
		},
		hide() {
			this.value = false;
			this.buttonLoading = false;
		},
		ok() {
			this.buttonLoading = false;
		},
		loading(bool) {
			console.log('%c [ bool ]-121', 'font-size:13px; background:pink; color:#bf2c9f;', bool);
			this.buttonLoading = bool;
		},
		handleSubmitClose() {
			this.value = false;
		},
		handleClose() {
			this.value = false;
		},
	},
};
</script>

<style lang="scss" scoped></style>
